<!-- 场景配置 -->
<template>
  <div>
    <Edialog
      @close="close"
      title="场景配置"
      :outershow="manufacturerShow"
      :internal="true"
      :saveClick="true"
      @saveFn="submitFn"
    >
      <div style="margin-bottom: 20px">
        <el-form :model="sceneInfo" ref="sceneInfo" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="11">
              <el-form-item label="场景编码" prop="sceneCode">
                <span>{{ sceneInfo.sceneCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <div style="font-size: 14px">
                <el-form-item label="场景名称" prop="sceneName">
                  <span>{{ sceneInfo.sceneName }}</span>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="添加模板" prop="add">
                <el-button type="primary" @click="addTemplate" size="medium"
                  >选择模板</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        max-height="500"
        row-key="id"
        border
      >
        <el-table-column type="index" width="55" label="序号" align="center">
        </el-table-column>
        <el-table-column label="模板编码" show-overflow-tooltip align="center">
          <template slot-scope="scope">{{ scope.row.templateCode }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="templateName"
          label="模板名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="subjectNum"
          label="科目数量"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="editorSubjectNum"
          label="编辑数量"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="preview(scope.$index, scope.row)"
              >预览</el-button
            >
            <el-button
              type="text"
              @click="handleDelete(scope.$index, scope.row)"
              style="color: red"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="flex">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.currPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
        >
        </el-pagination>
      </div> -->
    </Edialog>
    <!-- 模板预览 -->
    <upload_preview ref="upload_preview"></upload_preview>
    <!-- 模板选择 -->
    <template_choose
      ref="template_choose"
      @rowdbckick="rowdbckick"
    ></template_choose>
  </div>
</template>

<script>
import upload_preview from "@/views/sceneManage/components/upload_preview.vue";
import template_choose from "@/components/Xspreadsheet/template_choose.vue";
import ETable from "@/components/ETable";
import Edialog from "@/components/Edialog";
import Epagination from "@/components/Epagination";
import Eselect from "@/components/Eselect";
import {
  putSceneInfoApi,
  postSceneInfoApi,
  deleteSceneInfoByIds,
  SceneInfoApi,
  SceneInfoByIdApi,
  SceneInfoCopyByIdApi,
  putSceneTemplateApi,
  postSceneTemplateApi,
  SceneTemplateCopyByIdApi,
  deleteSceneTemplateByIds,
  SceneTemplateApi,
  SceneTemplateByIdApi,
} from "@/api/sceneManage";
export default {
  components: {
    Edialog,
    ETable,
    Epagination,
    Eselect,
  },
  components: {
    template_choose,
    upload_preview,
    Eselect,
    ETable,
    Edialog,
    Epagination,
  },
  data() {
    return {
      pageInfo: {
        currPage: 1,
        pageSize: 10,
        total: 0,
      },
      // 是否显示弹框
      manufacturerShow: false,
      // 排序和搜索的数据
      setOf: {
        sceneName: "",
        sceneCode: "",
      },
      rules: {
        sceneName: [
          { required: true, message: "场景编码不能为空", trigger: "blur" },
        ],
        sceneCode: [
          { required: true, message: "场景编码不能为空", trigger: "blur" },
        ],
        add: [{ required: true, message: "模板不能为空", trigger: "blur" }],
      },
      // 表格数据
      tableData: [],
      loading: false,
      //场景有关信息
      sceneInfo: {
        sceneCode: "",
        sceneName: "",
        sceneId: "",
      },
      //模板有关信息
      templateInfo: {
        templateCode: "",
        templateName: "",
        templateId: "",
      },
    };
  },
  computed: {
    // 计算属性会自动更新 pageInfo.total
    totalPages() {
      return this.tableData.length;
    },
  },
  watch: {
    // 侦听 totalPages 计算属性的变化，以更新 pageInfo.total
    totalPages(newTotal) {
      this.pageInfo.total = newTotal;
    },
  },
  props: {},
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageInfo.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageInfo.currPage = val;
      this.getTableData();
    },
    preview(index, row) {
      console.log("预览", index, row);
      this.$refs.upload_preview.manufacturerOpen(row);
    },
    async handleDelete(index, row) {
      console.log("删除", index, row);
      // return;
      let t = await this.$confirm("确认删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      if (t) {
        // let res = await deleteSceneTemplateByIds(row.id);
        // if (res.data && res.data.bcode == 0) {
        //   this.$message.success(res.data.bmsg || "删除成功");
        //   this.getTableData();
        // }
        this.tableData.splice(index, 1);
      }
    },
    rowdbckick(row) {
      this.$set(row, "templateId", row.id);
      console.log(row, this.tableData);
      if (this.tableData.length > 0) {
        let hadSame = false;
        this.tableData.find((item) => {
          if (item.templateId == row.templateId) {
            hadSame = true;
          }
        });
        if (hadSame) {
          this.$message.error("模板已存在");
        } else {
          this.tableData.push(row);
        }
      } else {
        this.tableData.push(row);
      }
    },
    addTemplate() {
      this.$refs.template_choose.manufacturerOpen();
    },
    async submitFn() {
      let templateIds = [];
      if (this.tableData.length > 0) {
        this.tableData.forEach((item) => {
          templateIds.push(item.templateId);
        });
      }
      if (templateIds.length == 0) {
        this.$message.error("请选择模板");
        return;
      }
      let params = {
        sceneId: this.sceneInfo.sceneId,
        templateIds: templateIds,
      };
      console.log("提交", params);
      let res = await postSceneTemplateApi(params);

      if (res.data && res.data.bcode == 0) {
        this.$message.success("添加成功");
        this.manufacturerShow = false;
        this.$emit("refresh");
      }
      console.log("提交", this.sceneInfo, this.tableData);
    },
    close() {
      // 关闭弹框方法
      this.manufacturerShow = false;
      this.$emit("close");
    },
    // 打开弹框方法
    async manufacturerOpen(data) {
      console.log("data", data);
      this.manufacturerShow = true;
      this.$nextTick(() => {
        this.sceneInfo.sceneName = data.sceneName;
        this.sceneInfo.sceneCode = data.sceneCode;
        this.sceneInfo.sceneId = data.id;
        this.getTableData();
      });
    },
    async getTableData() {
      this.loading = true;
      let params = {
        sceneId: this.sceneInfo.sceneId,
        // currPage: this.pageInfo.currPage,
        // pageSize: this.pageInfo.pageSize,
        currPage: 1,
        pageSize: 999,
      };
      let res = await SceneTemplateApi(params);
      this.loading = false;
      if (res.data && res.data.bcode == 0) {
        this.tableData = res.data.bdata.gdata || [];
        // this.pageInfo.total = res.data.bdata.total;
      } else {
        this.tableData = [];
        // this.pageInfo.total = 0;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.flex {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
